<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in imgList" :key="item.id">
        <img :src="item.src" alt="">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper, { Navigation, Pagination } from 'swiper' // 引入swiper.js
// import 'swiper/swiper-bundle.min.css'
import '../../../../node_modules/swiper/swiper-bundle.min.css'
// configure Swiper to use modules
Swiper.use([Navigation, Pagination])

export default {
  data () {
    return {
      imgList: [
        {
          id: 1,
          title: '11111111',
          src: 'https://static.maizuo.com/v5/upload/dfb943b2b8771769a9adef95459fe2ae.jpg?x-oss-process=image/quality,Q_70'
        },
        {
          id: 2,
          title: '22222222',
          src: 'https://static.maizuo.com/v5/upload/dfb943b2b8771769a9adef95459fe2ae.jpg?x-oss-process=image/quality,Q_70'
        },
        {
          id: 3,
          title: '33333333',
          src: 'https://static.maizuo.com/v5/upload/dfb943b2b8771769a9adef95459fe2ae.jpg?x-oss-process=image/quality,Q_70'
        }
      ]
    }
  },
  methods: {
    initSwiper () {
      /* eslint-disable no-new */
      new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      })
    }
  },
  mounted () {
    this.initSwiper()
  }
}
</script>
<style lang="scss" scoped>
// padding让图片宽高比固定并自适应布局
.swiper-wrapper {
  .swiper-slide {
    position: relative;
    width: 100%;
    padding-bottom: 50%;
    overflow: hidden;
  }
  img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}
</style>
